import React from 'react'
import Action from '../../action/action'
import Store from  '../../store/store'
import ReactMixin from 'react-mixin'
import Reflux from 'reflux'

import '../../less/details.less'
import Shuffling from '../../component/shuffling/shuffling'

export default class Details extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            index : this.props.location.query.index,
            productItem : {},
            merchantList : [],
            merchantItem : {},
            merchantIndex:""
        }
    }
    componentWillMount(){
        Action.setProductItem();
    }
    componentDidMount(){
        Action.getMerchantList(()=>{
            this.state.merchantList.map((item,i)=>{
                if(this.state.productItem.merchantId == item.id){
                    this.setState({
                        merchantItem:item,
                        merchantIndex:i,
                    })
                }
            })
        })
    }
    render(){
        let merchantItem = this.state.merchantItem;
        let productItem = this.state.productItem;
        return(
            <div className="details">
                <div className="detailsImages">
                    {productItem.images && productItem.images.length > 0 ? <Shuffling autoPlay={true} delay={3} items={productItem.images || []}/>: <div className="detailsImage" style={{backgroundImage: `url(${productItem.url || ""})`}}></div>}
                </div>
                <p>
                    {productItem.shareF > 0 ? <i className="iconfont icon-fan"></i> : null}
                    {productItem.text}
                </p>
                <div className="detailsPrice">
                    <div>
                        <span>￥{productItem.originalPrice}</span>
                        <label>￥{productItem.presentPrice}</label>
                    </div>
                    <label>库存：{productItem.stock || 0}</label>
                </div>
                <ul>
                    <li><i className="iconfont icon-check-outline"></i>{productItem.send ? "包邮" : "自提"}</li>
                    <li>
                        <p>优惠卡券</p>
                        <a href="">领取<i className="iconfont icon-qianjin-copy"></i></a>
                    </li>
                    <li>
                        <p>评价（{productItem.useEvaluate && productItem.useEvaluate.length}）</p>
                        <a href="">{`好评`}%<i className="iconfont icon-qianjin-copy"> </i></a>
                    </li>
                    <li>
                        <div>
                            <div style={{backgroundImage: `url(${merchantItem.logoUrl || ""})`}}> </div>
                            <p>{merchantItem.name}</p>
                        </div>
                        <span><i className="iconfont icon-lianxi-copy"></i><span>进入商店</span></span>
                    </li>
                    <li>
                        <span>点击查看更多</span>
                    </li>
                </ul>
                <div className="detailsBtn">
                    <ul>
                        <li><i className="iconfont icon-guanzhu"> </i></li>
                        <li><i className="iconfont icon-tubiao4"></i><span>2</span></li>
                        <li>
                            <span>加入购物车</span>
                        </li>
                        <li>
                            <a>立即购买</a>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
ReactMixin.onClass(Details,Reflux.connect(Store));